<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>实名认证 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/notice.js}"></script>
	<script type="text/javascript" th:src="@{/js/common.js}"></script>
	<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/regexp.js}"></script>
	<script type="text/javascript" th:src="@{/js/jweixin-1.2.0.js}"></script>
	<script type="text/javascript" th:src="@{/layer/layer.js}"></script>

	<link rel="stylesheet" th:href="@{/css/normalize.css}"></link>
	<link rel="stylesheet" th:href="@{/css/common.css}"></link>


	<style type="text/css">
		.content{
			overflow: hidden;
		}
		.userCheckCont{
			width: 100%;
		}
		.userInfoCont{
			overflow: hidden;
			padding: 40px 0px 20px;
			background-image: linear-gradient(to top,#1bb7c3,#f4f4f4);
			box-shadow: 0px 3px 3px #c1c1c1;
		}
		.userInfoCont  .userInfoIcon{
			width: 18%;
			margin: 0px auto 10px;
		}
		.userInfoCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}

		.solidCont{
			width: 200%;
			overflow: hidden;
		}
		.checkState{
			width: 50%;
			margin:30px 0px;
			float: left;
		}
		.checkState .stateIcon{
			width: 30px;
			margin: 0 auto;
		}
		.checkState .checkStateTxt{
			text-align: center;
			font-size: 14px;
			padding: 5px 0px;
			color: #333333;
			font-weight: bold;
			margin-bottom: 50px;
		}
		.checkState .checkBtn{
			width: 80%;
			line-height: 40px;
			margin: 5px auto;
			font-weight: bold;
			text-align: center;
			color: #20d6da;
			border: 2px solid #20d6da;
			border-radius: 20px;
		}
		.checkState .checkprompt{
			font-size: 14px;
			text-align: center;
			color: #888888;
			margin: 8px 0px 0px;
		}

		.infoCheckEditCont{
			width: 50%;
			float: left;
			padding-top: 20px;
			overflow:auto;
		}

		.submitBtn,.backBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			color: #20d6da;
			border: 2px solid #20d6da;
			font-weight: bolder;
		}

		#oldPhone{
			display: none;
		}

		/* userIdImg css */
		.userIdImgUpload{
			width: 90%;
			margin: 0 auto 20px;
			overflow: hidden;
		}
		.userIdImgUpload .userIdImgCont{
			width: 100%;
			overflow: hidden;
			border-radius: 8px;
			border: 1px solid #e1e1e1;
			background: #fff;
		}
		.userIdImgUpload .userIdImgCont img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.userIdImgUpload .userIdImgCont .userIdImgUploadDesc{
			margin: 0px;
			line-height: 30px;
			font-size: 14px;
			color: #999999;
			font-weight: bold;
			text-align: center;
		}


		.userUploadDesc{
			width: 90%;
			font-size: 14px; 
			color: #999999;
			margin: 0 auto 20px;
		}
		
		.imageCover{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			display: none;
		}

	</style>
</head>
<body onload="load();">
	<div class="content">
    
    <input id="timestamp" type="hidden" value="${timestamp}" />
	<input id="noncestr" type="hidden" value="${nonceStr}" />
	<input id="signature" type="hidden" value="${signature}" />
	<input id="appId" type="hidden" value="${appId}" />
	
	<div class="userCheckCont">
		<div class="userInfoCont">
			<div class="userInfoIcon">
				<img src="images/userInfoIcon.png" width="100%">
			</div>
			<div class="nickName">用户认证</div>
		</div>
	</div>
	
	<div class="solidCont">
		<div class="checkState">
			<div id="checkStateTxt">
				<div class="stateIcon">
					<img id="userImg" src="wximages/uncheckIcon.png" width="100%">
				</div>
				<div class="checkStateTxt" id="userIdentification">未认证</div>
			</div>

			
			<!-- 按钮组 -->
			<div id="userRegBtn" class="checkBtn userRegBtn" >新用户认证</div>
			<div class="checkprompt">认证通过开启信息化校园快递</div>
		</div>

		<div class="infoCheckEditCont" id="newUserReg">
			<form id="myForm">
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">姓名</div>
						<input type="text" id="userName" class="commonInput" name="name" placeholder="请输入你的姓名...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">手机</div>
						<input type="text" id="userPhone" class="commonInput" name="phone" placeholder="请输入你的手机号码...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">密码</div>
						<input type="text" id="userPassword" class="commonInput" name="password" placeholder="请输入你的密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">身份证</div>
						<input type="text" id="identify" class="commonInput" name="password" placeholder="请输入你的身份证号码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">短信</div>
						<input type="text" id="msgCode" class="verifiInput" name="msg" placeholder="请输入验证码...">
						<input id="btnSendCode1" type="button" class="verifiBtn" value="发送验证码" onclick="sendMessage1()">
					</div>
					
				</div>
			</form>
			<div id = "userRegSubmitBtn" class="submitBtn userRegSubmitBtn" onclick="binding()">确认提交</div>
			<div class="backBtn">点我返回</div>
		</div>
	</div>
	
	<div class="imageCover">
		<div class="coverCont">
			<img src="images/useridimage.jpg" width="100%">
		</div>
	</div>
</div>

<script type="text/javascript">
	var identification = null;
	$(function() {


		var pageContextVal = $("#PageContext").val();
		var wxCodeVal = $("#wxCode").val();
		var windowW = $(window).width();
		var windowH = $(window).height();
		if (windowW > 600) {
			windowW = 600;
		}
		
		var topH = $(".userCheckCont").height();
		$(".solidCont").css({"height":(windowH - topH) + "px"});
		$(".infoCheckEditCont").css({"height":(windowH - topH - 30) + "px"});
		
		// cover
		var contentH = $(".content").height();
		$(".imageCover").css({"height":contentH + "px"});

		// 样例图片展示  501*377
		var imageH = windowW * 377 / 501; 
		$(".coverCont").css({"margin-top":(windowH - imageH)/2 + "px"});

		$(".imageCover").click(function(){
			$(".imageCover").fadeOut();
		});
		
		$(".solidCont").css({"margin-left":0+"px"});

		$(".userRegBtn").click(function(){
			$(".solidCont").animate({"margin-left":-windowW+"px"},"fast");
		});

		$(".backBtn").click(function(){
			$(".solidCont").animate({"margin-left":0+"px"},"fast");
		});
	});
	$(function (){
		$.getJSON("/e/wx/isIdentification",null,function (data){
			if (data.code == 0){
				var obj = document.getElementById("userImg");
				obj.src="wximages/selecticon1.png";
				$("#userIdentification").html(data.message).val();
				$("#userRegBtn").html("新用户"+data.message).val();
				identify = data.code;
			}else if (data.code == 1) {
				var obj = document.getElementById("userImg");
				obj.src="wximages/selecticon1.png";
				$("#userIdentification").html(data.message).val();
				$("#userRegBtn").html("新用户"+data.message).val();
				identify = data.code;
			}
		});

	});

	//  /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
	var phoneReg = /^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/;
	var identify = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	var count = 60;
	var InterValObj1;
	var curCount1;
	$(function (){
		$("#identify").blur(function (){
			var userIdetify = $.trim($(this).val());
			if (!identify.test(userIdetify)){
				layer.msg(" 请输入有效的身份证");
				return false;
			}


		});
	});

	function sendMessage1() {
		curCount1 = count;
		var phone = $.trim($('#userPhone').val());
		if (!phoneReg.test(phone)) {
			layer.msg(" 请输入有效的手机号码");
			return false;
		}

		$("#btnSendCode1").attr("disabled", "true");
		$("#btnSendCode1").val( + curCount1 + "秒再获取");
		InterValObj1 = window.setInterval(SetRemainTime1, 1000);
		//发送短信
		var windowId = layer.load();
		$.getJSON("/e/wx/loginSms/+"+phone,function (data){
			layer.close(windowId);
			layer.msg(data.message);

		});

	}
	function SetRemainTime1() {
		if (curCount1 == 0) {
			window.clearInterval(InterValObj1);
			$("#btnSendCode1").removeAttr("disabled");
			$("#btnSendCode1").val("重新发送");
		}
		else {
			curCount1--;
			$("#btnSendCode1").val( + curCount1 + "秒再获取");
		}
	}

	function binding(){
		if (identify == 0) {

		}
		//alert("正在登陆")
		var userName = $.trim($("#userName").val());
		var userPhone = $.trim($("#userPhone").val());
		var userPassword = $.trim($("#userPassword").val());
		var msgCode = $.trim($("#msgCode").val());
		var userIdentify = $.trim($("#identify").val());



		var windowId = layer.load();
		$.post("/e/wx/newUserIdetification",{
			userPhone:userPhone,
			msgCode:msgCode,
			userName:userName,
			userPassword:userPassword,
			userIdentify:userIdentify
		},function (data){
			layer.close(windowId);
			if (data.code == 0){
				//用户或快递员登陆成功
				//$(".solidCont").animate({"margin-left":0+"px"},"fast");
				layer.msg(data.message,{time:1000,end:function () {
						window.location.href= "/userCheckStart";
					}})

			}else if (data.code == -1){
				layer.msg(data.message,{time:1000});
			}else {
				layer.msg(data.message,{time:1000});
			}

		},"JSON");
	}
</script>
</body>
</html>